<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :rank="true" :songs="songs"></music-list>
  </transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import {mapGetters} from 'vuex'
import {getMusicList} from 'api/rank'
import {ERR_OK} from 'api/config'
import {createSong} from 'common/js/song'

export default {
  name: 'top-list',
  components: {MusicList},
  data () {
    return {
      songs: []
    }
  },
  computed: {
    ...mapGetters([
      'toplist'
    ]),
    title () {
      return this.toplist.title
    },
    bgImage () {
      return this.toplist.headPicUrl
    }
  },
  methods: {
    _getMusicList () {
      getMusicList(this.toplist.topId).then(resp => {
        if (resp.code === ERR_OK) {
          resp.detail.data.songInfoList.forEach(item => {
            let song = createSong(item)
            if (!item.album.name) {
              song.image = this.bgImage
            }
            this.songs.push(song)
          })
        }
      }).catch(e => {
        console.log(e.message)
      })
    }
  },
  created () {
    this._getMusicList()
  }
}
</script>

<style lang="less" scoped>
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%,0,0);
  }
  .slide-enter-active, .slide-leave-active {
    transition: all .3s ease;
  }
</style>
